<template>
  <div class="header">
    <div class="registe_container">
      <el-form :rules="registeRules" :model="registeForm">
        <h2 class="registeTitle">注册</h2>
        <el-form-item prop="account">
          <el-input
            type="text"
            auto-complete="false"
            v-model="registeForm.account"
            oninput = "value=value.replace(/[^\d]/g,'')"
            placeholder="请输入学号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            auto-complete="false"
            v-model="registeForm.password"
            placeholder="请输入密码"
            onkeyup="value=value.replace(/[\W]/g,'')"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="Onsubmit"
            >注册</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="info" style="width: 100%" @click="backLogin"
            >返回登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      registeForm: {
        account: "",
        password: "",
      },
      registeRules: {
        account: [
          { required: true, message: "请输入学号", trigger: "blur" },
          { min:11,max: 11, message: "学号应为11位", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" },
        { min: 3, max: 6, message: "密码应为3~6位", trigger: "blur" },
        ],

      },
    };
  },
  methods: {
    backLogin() {
      this.$router.push("./login");
    },
    async Onsubmit() {

       if (this.registeForm.account == "" || this.registeForm.password == "") {
        this.$message.error("请填写完整");
        return;
      }
      if(this.registeForm.account.length!=11){
        this.$message.error("请填写正确学号");
        return;
      }
      if(this.registeForm.password.length<3||this.registeForm.password.length>6){
        this.$message.error("请填写规定位数密码");
        return;
      }
      const { data: res } = await this.$http.post(
        "http://www.xxr120.xyz:8000/api/users/registed",
        {
          account: this.registeForm.account,
          password: this.registeForm.password,
        }
      );

      if (res.code == 200) {
        this.$message.success("注册成功！");
        this.$router.push("/login");
      }
      else if (res.code == 100) {
        this.$message.error(res.msg);
      }
      // this.$message.success("注册成功！");
      // this.$router.push("./login");
    },
  },
};
</script>

<style scoped>
.header {
  height: 100%;
  position: relative;

    border-radius: 20px;
  /* border: 2px solid; */
  box-shadow:1px 2px 18px 10px rgb(90, 90, 90);
  background: rgba(189, 188, 188, 0.7);
}
h2 {
  font-family: "Lato", "sans-serif";
  font-weight: 300;
  /* font-spacing:2px; */
  font-size: 28px;
}
.registe_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  background-clip: border-box;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: #fff;
  border: 1px solid rgb(227, 236, 236);
  box-shadow: 0 0 5px #caccc6c6;
}
.registeTitle {
  text-align: center;
  margin: 10px auto 15px auto;
}
.el-form-item__content {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .registe_container {
    width: 250px;
  }
}
</style>
